<template>
  <div id="cclass">
    <div class="cclass-top">
      <div class="vourse-img">
        <img :src="require('@/assets/img/class.webp')" alt="" />
      </div>
      <span>我的课表</span>
    </div>
    <div class="cclass-bottom" v-for="item in getcdeehlsulist" :key="item" @click="goschedule">
      <div class="juxing1 juxing"></div>
      <div class="juxing2 juxing"></div>
      <div class="juxing3 juxing"></div>
      <div class="juxing4 juxing"></div>
      <div class="bottom-img">
        <img :src="item.image" alt="" />
      </div>
      <p class="p1">{{ item.title }}</p>
      <p class="p2">{{ item.subtitle }}</p>
      <div class="classroom">
        <span>{{ item.time }}后开始上课</span>
        <div class="enter">进教室</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcdeehlsu } from "../../utils/api";

export default {
  data() {
    return {
      getcdeehlsulist: []
    };
  },
  mounted() {
    this.getcdee();
  },
  methods: {
    goschedule() {
      this.$router.push("/schedule/");
    },
    async getcdee() {
      const res = await getcdeehlsu();
      this.getcdeehlsulist = res.result;
    }
  }
};
</script>
<style lang="scss" scoped>
#cclass {
  width: 100%;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin-bottom: 42px;
  .cclass-top {
    width: 100%;
    height: 60px;
    display: flex;
    // justify-content: center;
    align-items: center;
    span {
      margin-left: 5px;
      font-size: 17px;
      font-weight: 600;
    }
    .vourse-img {
      width: 25px;
      height: 25px;
      img {
        width: 23px;
        height: 24px;
      }
    }
  }
  .cclass-bottom {
    padding: 12px 12px 0 12px;
    margin: 0;
    margin-bottom: 42px;
    width: 100%;
    // height: 324px;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: 10px;
    position: relative;
    .juxing {
      width: 6px;
      height: 17.5px;
      border-radius: 5px;
      border: 1px solid;
      position: absolute;
      top: -10px;
      background: #fff;
    }
    .juxing1 {
      // position: absolute;
      top: -10px;
      left: 12px;
    }
    .juxing2 {
      // position: absolute;
      // top: 0px;
      left: 24px;
    }
    .juxing3 {
      // position: absolute;
      // top: 0px;
      right: 12px;
    }
    .juxing4 {
      // position: absolute;
      // top: 0px;
      right: 24px;
    }
    .bottom-img {
      width: 320px;
      height: 178px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .p1 {
      margin-bottom: 0px;
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      line-height: 16px;
    }
    .p2 {
      margin-top: 10px;
      font-size: 13px;
      text-align: left;
      line-height: 13px;
    }
    .classroom {
      width: 100%;
      height: 50px;
      border-top: 1px dashed;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14.5px;
        color: #31dfff;
      }
      .enter {
        width: 95px;
        height: 38px;
        color: #fff;
        font-size: 17px;
        background: #1bd0fe;
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
